<template>
  <view>
    <image src="https://img.qumoyugo.com/img/SW7WFJ6MJKJCAWIXQR991688979503470.png" style="height: 394.44rpx; width: 100%" ></image>

    <view style="background: #F4F4F4; padding: 9.03rpx 8.33rpx 0 8.33rpx;">
      <scroll-view scroll-y style="height: calc(100vh);" @scrolltolower="scrolltolower()">
        <view v-for="(item, index) in listData" :key="item.id" class="line-box"
              :style="{ marginTop: index===0?'-10rpx':'-20rpx', backgroundImage: item.couponType==='0'?`url('https://img.qumoyugo.com/img/P9F9FEAYIYMEEGSHIQN81688720571261.png')`:`url('https://img.qumoyugo.com/img/QA6VQV63ZSX3E0YVEJEF21691048017025.png')` }">
          <GetCoupon :data="item" :index="index" @collectCoupon="collectCoupon(item)"></GetCoupon>
        </view>
        <view class="no-data" v-if="listData.length === 0">
          <EmptyBox title="暂无数据哦～" img="https://img.qumoyugo.com/webimgbg/pets-no-data-product.png">
          </EmptyBox>
        </view>
        <view class="no-more" v-if="pagination.total > 8 && !pagination.more">
          -没有更多了-
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
import { ref, getCurrentInstance } from 'vue'
import GetCoupon from '@/components/list/GetCoupon'
import EmptyBox from '@/components/emptyBox'
const { $https } = getCurrentInstance().appContext.config.globalProperties
const listData = ref([])
const pagination = ref({
  page: 0,
  more: true,
  total: 0
})
const currentTab = ref('')
const pageOption = ref({})
onLoad((option) => {
  pageOption.value = option
  currentTab.value = option.type
  initData()
})
const scrolltolower = () => {
  if (pagination.value.more) {
    initData()
  }
}
const initData = () => {
  $https({
    url: '/app/couponInfo/getToBeCollectedCouponList',
    type: '',
    data: {
      page: pagination.value.page + 1,
      pageSize: 10,
      couponId: ''
    }
  }).then(res => {
    if (res.code === 0) {
      listData.value.push(...res.data.items)
      pagination.value = {
        page: res.data.pagination.page,
        total: res.data.pagination.total_record,
        more: res.data.pagination.more
      }
    }
  })
}
const refreshList = () => {
  pagination.value = {
    page: 0,
    more: true,
    total: 0
  }
  listData.value = []
  initData()
}
onPullDownRefresh(() => {
  refreshList()
  setTimeout(() => {
    uni.stopPullDownRefresh()
  }, 1500)
})
const collectCoupon = (item) => {
  $https({
    url: '/app/couponInfo/collectCoupon',
    type: '',
    data: item,
    method: 'post'
  }).then(res => {
    if (res.code === 0) {
      uni.showToast({
        title: '操作成功',
        icon: 'none'
      })

      refreshList()
    }
  })
}
</script>

<style scoped lang="scss">
.line-box{
  width: 733.33rpx;
  height: 202.92rpx;
  background-size: 100% 100%;
  &:last-child{
    border-bottom: none;
  }
}
.no-data{
  margin-top: 30%;
  text-align: center;
}
.no-more{
  text-align: center;
  color: #999999;
  padding-top: 20rpx;
  padding-bottom: 30px;
}
</style>
